<template>
  <div style="padding:20px">
    <div class="head">
      <div class="back">
        <el-button type="primary" size="mini" icon="el-icon-s-home" @click="back">返回</el-button>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="handlePopup">导出</el-button>
      </div>
    </div>

    <!-- <el-button type="primary" size="mini" icon="el-icon-s-data">导出</el-button> -->
    <el-table :data="tableData" border :height="height" :summary-method="getSummaries" size="mini"
              :header-cell-style="{ background: '#eee', color: 'black' }"
              show-summary
              style="width: 100%; border: 1px solid #ebebeb;box-shadow: 4px 4px 4px #efeeee;border-radius:6px">


      <el-table-column prop="enterprise" label="直管企业" width="180" align="center">
        <template slot-scope="scope">
          <!-- <el-checkbox @change="selectChange" v-model="scope.row.selected"></el-checkbox> -->
          <span style="border-bottom: 1px solid red; margin-left: 12px" @click="rowClick(scope.row)">{{ scope.row.enterprise }}</span>
        </template>
      </el-table-column>

      <el-table-column label="有效专利总量" align="center">
        <el-table-column prop="effectiveTotal1" label="上年末" align="center"/>
        <el-table-column prop="effectiveTotal2" label="本周末" align="center"/>
        <el-table-column prop="effectiveTotalIncr" label="增量" align="center"/>
      </el-table-column>

      <el-table-column label="有效发明总量" align="center">
        <el-table-column prop="effectiveInvention1" label="上年末" align="center"/>
        <el-table-column prop="effectiveInvention2" label="本周末" align="center"/>
        <el-table-column prop="effectiveInventionIncr" label="增量" align="center"/>
      </el-table-column>

      <el-table-column label="有效高价值发明总量" align="center">
        <el-table-column prop="effectiveHighCost1" label="上年末" align="center"/>
        <el-table-column prop="effectiveHighCost2" label="本周末" align="center"/>
        <el-table-column prop="effectiveHighCostIncr" label="增量" align="center"/>
      </el-table-column>

      <el-table-column label="本年度专利授权量" align="center">
        <el-table-column prop="grantTotal" label="发明" align="center"/>
        <el-table-column prop="designTotal" label="实用新型" align="center"/>
        <el-table-column prop="utilityTotal" label="外观设计" align="center"/>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {
    getStatisticsData1,
    downloadStatisticsData2
  } from '@/api/retrieval'

  export default {
    name: "directly",

    data() {
      return {
        height: "calc(100vh - 100px)",
        tableData: []
      }
    },
    mounted() {
      this.getTableDate()
    },
    methods: {
      getSummaries(param) {
        const {
          columns,
          data
        } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += '';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      },
      back() {
        this.$router.go(-1)
      },
      handlePopup() {
        downloadStatisticsData2().then(res => {

          const headers = res.headers
          let link = document.createElement("a");
          // 响应头获取编码的文件名称
          let filename = decodeURI(headers["content-disposition"].split(";")[1].split("=")[1])
          let blob;
          try {
            //该实例化的方式第一个参数必须是数组的格式
            blob = res.data;
          } catch (e) {
            //旧版本浏览器下的blob创建对象
            window.BlobBuilder = window.BlobBuilder ||
              window.WebKitBlobBuilder ||
              window.MozBlobBuilder ||
              window.MSBlobBuilder;
            if (e.name == 'TypeError' && window.BlobBuilder) {
              var blobbuilder = new BlobBuilder();
              BlobBuilder.append(data);
              blob = blobbuilder.getBlob('application/vnd.ms-excel,charset=utf-8');
            } else {
              alert("浏览器版本较低，暂不支持该文件类型下载");
            }
          }
          let url = window.URL.createObjectURL(blob);

          link.setAttribute("href", url)
          link.download = filename
          document.body.appendChild(link);
          link.click()
          document.body.removeChild(link);
        })
      },

      getTableDate() {

        //请求
        getStatisticsData1().then(res => {

          this.tableData = res.data.list

        })
      },
      rowClick(row) {
        let data = {
          "queryColumn": [],
          "queryConditions": [{
            "fieldName": "enterprise_stat",
            "value": row,
            "boolType": 1
          }],
          "pageIndex": 1,
          "pageSize": 20
        }

        localStorage.setItem("searchData", JSON.stringify(data))

        this.$router.push({
          path: "/retrieval/tableList"
        })

      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
